<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{(money/100).toFixed(2)}}</h2>
        <!-- 我们在使用过滤器的时候 小胡子中 最终展示的是过滤之后的结果 -->
        <h2>{{money|toFix(100,200,300)|qqq}}</h2>
        <input type="text" v-model='money'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    /* 
      全局过滤器   局部过滤器 ： 全局自定义指令  局部自定义指令
        过滤器 和  自定义指令 这两类 对应的函数中的this 都不是当前实例
    */
    Vue.filter('toFix',function(val){
        // val 对应的就是 管道符前边的值
        //val 后边的实参对应的就是 使用时 在小括号中写的哪些参数
        console.log(arguments)
        return (val/100).toFixed(2)
    })
    Vue.filter('qqq',function(val){
        console.log('qqq',arguments)
        return val + 'qqq'
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            money:''
        },
        filters:{
            qqq(val){
                console.log(this)
                return val + 'hahaha'
            }
        },
        methods: {
            fn(){

            }
        },
    });
</script>
